<template>
	<div class="login-box">
		<!-- 头部 -->
		<TopTab :topTabTitle="topTabTitle"></TopTab>
		<!-- 内容 -->
		<div class="content">
			<!-- 账号框 -->
			<div class="input"><MyInput :title="'账号'" :placeholder="'填写手机号或用户名'" @inputBlur="getAccount"></MyInput></div>
			<!-- 密码框 -->
			<div class="input">
				<MyInput :title="'密 码'" :placeholder="'填写密码'" :type="pwdShow ? 'text' : 'password'" @inputBlur="getPwd"></MyInput>
				<span @click="pwdSH" :class="pwdShow ? 'pwdHind' : 'pwdShow'"></span>
			</div>
			<!-- 免登、找密 -->
			<div class="noLogin">
				<p @click="noPwd">
					<span :class="isNoPwd ? 'noPwd' : ''"></span>
					7天内免登录
				</p>
				<p @click="retrieve">
					<span class="retrieve"></span>
					找回密码
				</p>
			</div>

			<button @click="login">立即登录</button>

			<router-link class="kipt-a" to="/reg">我还没有账号，点击注册</router-link>
		</div>

		<!-- 错误提示框 -->
		<div class="tips-box" v-show="isDetermine" @click="determine">
			<div class="tips">
				<p>{{ determineTitle }}</p>
				<button @click="determine">确定</button>
			</div>
		</div>
	</div>
</template>

<script>
import TopTab from '@/components/topTab.vue';
import MyInput from '@/components/myInput.vue';
export default {
	name: 'login',
	data() {
		return {
			topTabTitle: '会员登录',
			toFullPath: '',
			pwdShow: false,
			noPwdCheck: false,
			isNoPwd: false,
			isDetermine: false,
			determineTitle: '',
			user: {
				userName: 'root',
				pwd: '123'
			}
		};
	},
	methods: {
		/* 获取账号 */
		getAccount(res) {
			this.user.userName = res;
		},

		/* 获取密码 */
		getPwd(res) {
			this.user.pwd = res;
		},
		/* 密码显隐 */
		pwdSH() {
			this.pwdShow = !this.pwdShow;
		},
		/* 免密登录 */
		noPwd() {
			this.isNoPwd = !this.isNoPwd;
		},
		/* 找回密码 */
		retrieve() {},
		/* 登录按钮 */
		login() {
			// 用户名不为空
			if (this.user.userName == '') {
				this.isDetermine = true;
				this.determineTitle = '手机号必须填！';
				// 密码不为空
			} else if (this.user.pwd == '') {
				this.isDetermine = true;
				this.determineTitle = '密码必须填！';
			} else {
				var excUsr = [];
				// 获取用户信息
				let getUser = JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')) : [];
				var toFullPath = localStorage.getItem('toFullPath');
				if (getUser.length > 0) {
					// 判断用户登录
					excUsr = getUser.filter(item => {
						return item.phone == this.user.userName && item.pwd == this.user.pwd;
					});
					// 判断用户登录
					if (excUsr.length > 0) {
						localStorage.setItem('token', this.setToken());
						localStorage.setItem('thisUser', JSON.stringify(excUsr[0]));
						this.$router.replace(toFullPath);
					} else {
						this.isDetermine = true;
						this.determineTitle = '用户名或密码错误！';
					}
				} else {
					if ('root' == this.user.userName && '123' == this.user.pwd) {
						localStorage.setItem('token', this.setToken());
						localStorage.setItem(
							'thisUser',
							JSON.stringify({
								userName: 'root',
								pwd: '123'
							})
						);
						this.$router.replace(toFullPath);
					} else {
						this.isDetermine = true;
						this.determineTitle = '用户名或密码错误！';
					}
				}
			}
		},
		/* 提示框确定 */
		determine() {
			this.isDetermine = false;
		},
		/* 正则验证 */
		// verification(regular,param,tips) {
		// 	console.log(regular,param,tips);
		// },
		/* 生成token */
		setToken() {
			let x = new Date();
			let nowTime = '' + x.getFullYear() + (x.getMonth() + 1) + x.getDate() + x.getHours() + x.getMinutes() + x.getSeconds();
			let maths = [];
			for (var i = 0; i < 5; i++) {
				maths.push(Math.floor(Math.random() * 10));
			}
			let str = maths.join('');
			return nowTime + str;
		}
	},
	created() {
		this.toFullPath = localStorage.getItem('toFullPath');
	},
	mounted() {
		document.querySelector('.login-box').style.height = document.documentElement.clientHeight + 'px';
		document.querySelector('.tips-box').style.height = document.documentElement.clientHeight + 'px';
	},
	components: { TopTab, MyInput }
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.login-box {
	width: 100%;
	background-color: #f8f8f8;
}
.content {
	width: 100%;
	position: fixed;
	top: 0.92rem;
	padding-top: 0.2rem;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.input {
	width: 95%;
	position: relative;
	margin-top: 0.3rem;
}
.input span {
	background: url(http://hs.lxgsa.cn/wap/resource/images/prov.png) no-repeat;
	width: 32px;
	height: 32px;
	background-size: 95%;
	position: absolute;
	right: 0.3rem;
	top: 0.1rem;
}
.input .pwdShow {
	background-position: 0 -11px;
}
.input .pwdHind {
	background-position: 0 -50px;
}

.noLogin {
	margin-top: 0.35rem;
	width: 95%;
	height: 0.84rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.1rem;
}
.noLogin p {
	height: 100%;
	color: #6d6d6d;
	font-size: 0.28rem;
	display: flex;
	align-items: center;
}
.noLogin p:first-child span {
	width: 25px;
	height: 24px;
	background: url(http://hs.lxgsa.cn/wap/images/icon.png) no-repeat;
	background-position: 104% 90.7%;
	background-size: 250%;
	/* border: #000000 solid 0.01rem; */
}
.noLogin p:first-child .noPwd {
	background-position: 0 90.707%;
}

.retrieve {
	background: url(http://hs.lxgsa.cn/wap/resource/images/logins.png) no-repeat;
	width: 18px;
	height: 18px;
	background-size: 100% 100%;
	margin-right: 0.05rem;
}
button {
	width: 95%;
	height: 0.8rem;
	border: none;
	margin-top: 0.2rem;
	border-radius: 0.15rem;
	background-color: #96602e;
	color: white;
	font-size: 0.32rem;
}
.kipt-a {
	margin-top: 0.3rem;
	width: 95%;
	height: 0.8rem;
	color: #0b4fb5;
	font-size: 0.23rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 错误提示框 */
.tips-box {
	width: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	z-index: 5;
}
.tips {
	width: 6rem;
	height: 2rem;
	background-color: white;
	border-radius: 0.2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.tips p {
	width: 100%;
	height: 1.1rem;
	line-height: 1.1rem;
	text-align: center;
	color: #6c6c6c;
	font-size: 0.28rem;
	border-bottom: gainsboro solid 0.01rem;
}
.tips button {
	width: 100%;
	height: 0.9rem;
	border: none;
	color: #e80018;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
</style>
